<template>
  <free-app bgType="image" :navbar="navbarOptions">
    <!-- serach -->
    <view class="p-3" id="header">
      <SearchBox></SearchBox>
      <!-- 快捷选项 -->
      <scroll-view
        scroll-x
        class="w-[700rpx] m-auto my-[24rpx]"
        :show-scrollbar="false"
      >
        <view class="flex">
          <view
            v-for="(item, index) in categoryList"
            :key="index"
            class="flex flex-col items-center justify-center mr-[24rpx]"
            @click="handleCategoryClick(item)"
          >
            <image
              :src="item.image"
              class="w-[112rpx] h-[112rpx] rounded-[20rpx] mx-3 mb-[8rpx]"
              mode="aspectFill"
            />
            <text class="text-size-1 color-text-1">{{ item.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 类目列表 -->
    <CategoryList :scrollHeight="scrollHeight"></CategoryList>
  </free-app>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, nextTick } from "vue";
// 搜索框
import SearchBox from "@/components/search-box/index.vue";
// 类目列表
import CategoryList from "./components/category-list/index.vue";
// 导航栏配置
const navbarOptions = {
  title: "分类",
  placeholder: true,
};
const instance = getCurrentInstance();

// 可滚动高度
const scrollHeight = ref(0);
// 主要区域滚动事件
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  // 获取header 的高度
  const query = uni.createSelectorQuery().in(instance);
  query
    .select("#header")
    .boundingClientRect((data) => {
      nextTick(() => {
        // 44 是导航栏的高度
        scrollHeight.value =
          systemInfo.windowHeight -
          data.height -
          systemInfo.safeAreaInsets.top -
          44;
      });
    })
    .exec();
});
// 类目数据
const categoryList = ref([
  {
    name: "迅时代",
    image: "/static/images/temp/logo.png",
  },
  {
    name: "迅时代",
    image: "/static/images/temp/logo.png",
  },
  {
    name: "迅时代",
    image: "/static/images/temp/logo.png",
  },
  {
    name: "迅时代",
    image: "/static/images/temp/logo.png",
  },
  {
    name: "迅时代",
    image: "/static/images/temp/logo.png",
  },
]);

// 类目点击事件
const handleCategoryClick = (item) => {
  // 处理类目点击，可以跳转到对应类目页面
  console.log("点击类目：", item.name);
};
</script>

<style lang="scss" scoped></style>
